<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {deleteChapter, listChapters} from "@/api/author";

const route = useRoute();
const router = useRouter();

const state = reactive({
  bookId: route.query.id,
  chapters: [],
  searchCondition: {},
  backgroud: true,
  total: 0,
  pageSize: 10,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL
});
const {bookId, chapters, searchCondition, backgroud, total, pageSize, imgBaseUrl} = toRefs(state)
onMounted(() => {
  load();
});

const load = async () => {
  const {data} = await listChapters(state.bookId, state.searchCondition);
  state.chapters = data.list;
  state.searchCondition.pageNum = data.pageNum;
  state.searchCondition.pageSize = data.pageSize;
  state.total = Number(data.total);
};

const handleCurrentChange = (pageNum: any) => {
  state.searchCondition.pageNum = pageNum;
  load();
};

const deleteBookChapter = async (id: any) => {
  await deleteChapter(id);
  load();
};
</script>
<template>
  <div class="main">
    <div class="container">
      <div class="top">
        <Header></Header>
      </div>
      <div class="bottom">
        <div class="left">
          <div>
            <RouterLink :to="{'name':'authorBookList'}">小说管理</RouterLink>
          </div>
        </div>
        <div class="right">
          <div v-if="total == 0" class="no-content">
            <div class="create-btn">
              <router-link :to="{ name: 'authorChapterAdd' , query: { id: bookId }}" class="link">
                <el-button round type="primary">
                  章节发布
                </el-button>
              </router-link>
            </div>
          </div>
          <div v-if="total>0" class="content">
            <div class="title">
              <span>小说列表</span>
              <router-link :to="{ name: 'authorChapterAdd', query: { id: bookId } }" class="btn_red"
                           style="color: white;text-decoration: none">
                <el-button round type="primary">
                  新建章节
                </el-button>
              </router-link>
            </div>
            <div class="table">
              <el-table :data="chapters" style="width: 100%">
                <el-table-column align="center" label="章节名" prop="chapterName" width=""/>
                <el-table-column align="center" label="更新时间" prop="chapterUpdateTime"/>
                <el-table-column align="center" label="是否收费" prop="isVip" width="80">
                  <template #default="scope">
                    <span v-if="scope.row.isVip==1">是</span>
                    <span v-else>否</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="120">
                  <template #default="scope">
                    <div style="display: flex;gap:10px;justify-content: center">
                      <router-link :to="{'name':'authorChapterUpdate','query':{'id':scope.row.id}}" class="redBtn"
                                   style="color: white;text-decoration: none">
                        <el-button round size="small" type="primary">
                          修改
                        </el-button>
                      </router-link>
                      <el-button round size="small" type="primary" @click="deleteBookChapter(scope.row.id)">
                        删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page-nav">
              <el-pagination
                  :background="backgroud"
                  :page-size="pageSize"
                  :total="total"
                  layout="prev, pager, next"
                  small
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  background-color: #F5F5F5;
  padding: 20px;

  .container {
    min-height: 77vh;
    width: 60%;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .bottom {
      display: flex;

      .left {
        flex: 1;
        padding: 10px 0;

        div {
          padding: 10px;
          width: 80%;
          text-align: center;
          border-left: 5px solid #48A4FF;
          background-color: #F5F5F5;

          a {
            text-decoration: none;
          }
        }

        border-right: 2px solid #F5F5F5;
      }

      .right {
        flex: 3;
        padding: 10px;

        .no-content {
          height: 80vh;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .create-btn {
            .el-button {
              width: 120px;
              height: 40px;
            }
          }
        }

        .content {
          height: 100%;
          //border: 1px solid #000;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .title {
            display: flex;

            span {
              font-size: 25px;
            }

            justify-content: space-between;
          }

          .table {
            //border: 1px solid #000;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
          }

          .page-nav {
            padding-bottom: 20px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>